<template>
  <div class="home-container">
    <!-- 活动背景部分 -->
    <div class="event-container">
      <div class="first-box">
        <div class="first-item">
          <div class="first-item-l">
            <img src="../assets/1.png" />
            <div>2</div>
          </div>
          <div class="first-item-r">
            <img src="../assets/2.png" />
            <span>32</span>
          </div>
        </div>
        <div class="first-item">
          <img src="../assets/3.png" />
          <div class="first-item-r">
            <img src="../assets/4.png" />
            <span :class="{ unsign: status === '未签到' }"></span>
            <span @click="changeStatus">{{ status }}</span>
          </div>
        </div>
      </div>
      <div class="second-box">
        <div class="bubble">
          <span>支付成功</span>
          <img src="../assets/5.png" />
        </div>
        <div class="bubble">
          <span>支付成功</span>
          <img src="../assets/5.png" />
        </div>
        <div class="bubble">
          <span>运动步数</span>
          <img src="../assets/5.png" />
        </div>
        <div class="bubble">
          <span>新人专享</span>
          <img src="../assets/7.png" />
        </div>
        <div class="bubble">
          <span>运动步数</span>
          <img src="../assets/5.png" />
        </div>
      </div>
      <div class="third-box">
        <div class="step">
          <div class="step-t">今日步数</div>
          <div class="step-c">2748</div>
          <div class="step-b">每日24:00自动清零</div>
        </div>
        <div class="cash">
          <img class="cash-l" src="../assets/6.png" />
          <img class="cash-r" src="../assets/8.png" />
          <span>瓜分888现金</span>
        </div>
      </div>
      <img class="event-bg" src="../assets/bg.png" />
    </div>
    <!-- 租币用途部分 -->
    <div class="rent-container">
      <div class="rent-t">
        <div class="line"></div>
      </div>
      <div class="rent-c">租币当钱花</div>
      <div class="rent-b">
        <div v-for="_ in activeList" class="rent-b-item">
          <img src="../assets/9.png" />
        </div>
      </div>
    </div>
    <!-- 推荐部分 -->
    <div class="recommend-container">
      <div class="recommend-title">租物推荐</div>
      <div class="recommend-content">
        <div v-for="_ in productList" class="content-item">
          <div class="product-img"><img src="../assets/10.png" alt="" /></div>
          <div class="text">顶配 iPhone Xs 256...</div>
          <div class="tag">免押金</div>
          <div class="bottom">
            <span class="price">￥6.88/天</span>
            <span class="day">30天起租</span>
          </div>
        </div>
      </div>
      <div class="recommend-bottom">
        <div class="button">查看更多</div>
      </div>
    </div>
  </div>
  <div class="signTip" :class="{ 'tip-show': showTip }">签到成功</div>
</template>

<script setup lang="ts">
import { ref } from "vue";
let status = ref<string>("未签到");
const productList = ref<number[]>(new Array(4).fill(1));
const activeList = ref<number[]>(new Array(12).fill(1));
const showTip = ref(false);

function changeStatus() {
  if (status.value === "未签到") {
    status.value = "已签到";
    showTip.value = true;
    setTimeout(() => {
      showTip.value = false;
    }, 1000);
  }
}
</script>

<style lang="scss" scoped>
@mixin flexBox($jc-value: center, $ac-value: center) {
  display: flex;
  justify-content: $jc-value;
  align-items: $ac-value;
}

.home-container {
  width: 100%;
  height: 100%;

  .top-container {
    width: 100%;
    height: 50px;
    background-color: #fff;
    @include flexBox($jc-value: space-between, $ac-value: center);

    .title-container {
      font-weight: 800;
      padding: 10px;
      font-size: 16px;
    }

    .oper-container {
      @include flexBox();
      flex-wrap: nowrap;

      .collect {
        @include flexBox(space-evenly);
        width: 70px;
        height: 30px;
        border-radius: 50px;
        padding: 0px 5px;
        font-size: 14px;
        box-sizing: border-box;
        border: 1px #ddd solid;
        color: rgb(61, 163, 237);
        background-color: #fff;
      }

      .share {
        @include flexBox(space-around);
        width: 70px;
        height: 30px;
        border-radius: 50px;
        padding: 0px 5px;
        margin: 0px 5px;
        font-size: 14px;
        box-sizing: border-box;
        border: 1px #ddd solid;
        color: rgb(61, 163, 237);
        background-color: #fff;

        .more {
          @include flexBox();
          border-right: 1px #ddd solid;
          padding-right: 5px;
        }

        .out {
          @include flexBox();
        }
      }
    }
  }

  .event-container {
    height: 400px;
    position: relative;

    .event-bg {
      width: 100%;
      height: 100%;
      position: absolute;
      left: 0;
      top: 0;
      z-index: -1;
    }

    .first-box {
      height: 100px;
      padding: 10px 0px;

      .first-item {
        @include flexBox(space-between);
        height: 40px;
        margin: 5px 0px;

        img {
          padding: 10px;
        }

        .first-item-l {
          position: relative;

          div {
            @include flexBox();
            position: absolute;
            width: 12px;
            height: 12px;
            border-radius: 50%;
            font-size: 10px;
            border: 1px #fff solid;
            top: 5px;
            right: 5px;
            color: #fff;
            background-color: rgb(252, 134, 103);
          }
        }

        .first-item-r {
          width: 75px;
          height: 32px;
          border-radius: 15px 0 0 15px;
          font-size: 12px;
          color: rgb(30, 97, 52);
          position: relative;
          @include flexBox(flex-start);
          cursor: pointer;
          background-color: rgb(204, 237, 255);

          .unsign {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background-color: #fd601c;
            position: absolute;
            top: 2px;
            left: 22px;
          }

          img {
            padding: 0px 5px;
          }
        }
      }
    }

    .second-box {
      height: 100px;
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      padding: 0px 30px;

      .bubble {
        @include flexBox();
        flex-direction: column;

        span {
          font-size: 12px;
        }
      }

      .bubble:nth-child(2n) {
        margin-top: -60px;
      }

      .bubble:nth-child(3) {
        margin-top: -40px;
      }
    }

    .third-box {
      @include flexBox();

      .step {
        width: 160px;
        height: 160px;
        border-radius: 50%;
        margin-top: -35px;
        @include flexBox(unset);
        flex-direction: column;
        background-color: #fff;
        position: relative;
        opacity: 1;

        .step-t {
          height: 20px;
          margin-top: 20px;
          font-size: 12px;
          color: #9b9494;
        }

        .step-c {
          height: 50px;
          font-size: 42px;
          color: rgb(7, 78, 59);
        }

        .step-b {
          height: 20px;
          font-size: 12px;
          text-align: start;
          color: #9b9494;
        }
      }

      .cash {
        width: 220px;
        height: 45px;
        border-radius: 50px;
        bottom: 50px;
        @include flexBox();
        position: absolute;
        background: linear-gradient(
          to bottom,
          rgb(255, 167, 40),
          rgb(247, 93, 31)
        );

        .cash-l {
          position: absolute;
          left: 25px;
          bottom: 45px;
        }

        .cash-r {
          position: absolute;
          right: 20px;
          bottom: 45px;
        }

        span {
          font-size: 20px;
          color: #fff;
        }
      }
    }
  }

  .rent-container {
    height: 170px;
    border-radius: 20px 20px 0px 0px;
    margin-top: -20px;
    background-color: #fff;

    .rent-t {
      @include flexBox();
      height: 30px;

      .line {
        width: 30px;
        height: 5px;
        border-radius: 10px;
        background-color: #ddd;
      }
    }

    .rent-c {
      height: 40px;
      padding-left: 10px;
      font-size: 20px;
      font-weight: 500;
    }

    .rent-b {
      height: calc(100% - 30px - 40px);
      padding-left: 10px;
      display: flex;
      overflow-x: auto;
      overflow-y: hidden;

      .rent-b-item {
        flex: 0 0 auto;
        width: 90px;
        height: 100%;
        margin-right: 5px;

        img {
          width: 100%;
          height: 100%;
        }
      }
    }
  }

  .recommend-container {
    margin-top: 10px;
    padding-bottom: 40px;
    background-color: #f4f6f8;

    .recommend-title {
      height: 40px;
      padding-top: 20px;
      padding-left: 10px;
      font-size: 20px;
      font-weight: 500;
    }

    .recommend-content {
      padding: 0px 10px;
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 10px;

      .content-item {
        height: 220px;
        border-radius: 5px;
        background-color: #fff;
        padding-left: 5px;

        .product-img {
          @include flexBox();
          padding: 10px 0px;
        }

        .tag {
          width: 45px;
          font-size: 12px;
          margin: 5px 0px;
          color: #3cca6b;
          border: 1px #3cca6b solid;
          @include flexBox();
        }

        .bottom {
          @include flexBox(space-between);

          .price {
            font-size: 14px;
            color: rgb(224, 94, 94);
          }

          .day {
            font-size: 12px;
            padding-right: 5px;
            color: #bebdc0;
          }
        }
      }
    }

    .recommend-bottom {
      @include flexBox();

      .button {
        width: 150px;
        height: 30px;
        border-radius: 50px;
        margin: 15px 0px;
        border: 1px #bebdc0 solid;
        color: #bebdc0;
        @include flexBox();
      }
    }
  }
}
.signTip {
  width: 100px;
  height: 100px;
  position: fixed;
  left: 50%;
  top: 50%;
  opacity: 0;
  font-size: 20px;
  border-radius: 5px;
  color: #fff;
  @include flexBox();
  background-color: #000;
  transform: translate(-50%, -50%);
  transition: opacity z-index 0.5s ease;
  z-index: -10;
}
.tip-show {
  z-index: 10;
  opacity: 0.7;
}
</style>
